
  <template>
    <style>
      :host {
        display: flex;
        flex-direction: column;
      }

      .list-with-header > div:first-of-type {
        border-top: var(--cr-separator-line);
      }

      .website-column {
        align-items: center;
        display: flex;
        flex: 1;
      }

      .website-column > a {
        color: var(--cr-primary-text-color);
      }

      .username-column {
        flex: 1;
        margin: 0 8px;
      }

      .password-column {
        align-items: center;
        display: flex;
        flex: 1;
      }

      .password-field {
        background-color: transparent;
        border: none;
        flex: 1;
        height: 20px;
        width: 0;
      }

      .type-column {
        align-items: center;
        flex: 2;
      }

      .ellipses {
        flex: 1;
        max-width: fit-content;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      site-favicon {
        margin-inline-end: 16px;
        min-width: 16px;
      }

      input.password-input,
      cr-input.password-input::part(input),
      #leakedPassword {
        /* Since passwords are displayed with an input element, this is
         * necessary to prevent Chrome from using the operating system's font
         * instead of the Material Design font.
         * TODO(dbeam): why not font: inherit? */
<if expr="chromeos_ash or chromeos_lacros or is_linux">
        font-family: 'DejaVu Sans Mono', monospace;
</if>
<if expr="is_win">
        font-family: 'Consolas', monospace;
</if>
<if expr="is_macosx">
        font-family: 'Menlo', monospace;
</if>
      }
    </style>
  </template>
